/**
 * Created by Administrator on 2017/3/27 0027.
 */
import React from "react";
import {Image, Text, TouchableOpacity, View} from "react-native";
import Util from "../Util";
import CarDetail from "./components/CarDetail";
import chjStyle from "../../CustomStyle";
import CustomStyle from "../../../common/style/CustomStyle.js";
import {Actions} from "react-native-router-flux";

export default class CommonRenderer extends React.Component {
    render() {
        return this.renderCarItem(this.props.rowData);
    }

    renderCarItem(rowData) {
        let statusStr = Util.splitDateDay(rowData.firstDate) + '上牌';
        if (rowData.meter) {
            statusStr += '/ 行驶' + parseFloat(rowData.meter).toFixed(2) + '万公里';
        }

        const picUrl = rowData.imgName;

        return (
            <TouchableOpacity
                onPress={() => this.onPressedItem(rowData)}
                style={{
                    width: chjStyle.width,
                    height: chjStyle.getActualSizeInVertical(220),
                }}>

                <View style={{
                    width: chjStyle.width,
                    height: chjStyle.getActualSizeInVertical(160),
                    paddingLeft: chjStyle.getActualSizeInHorizontal(20),
                    paddingRight: chjStyle.getActualSizeInHorizontal(20),
                    flexDirection: 'row',
                    paddingTop: chjStyle.getActualSizeInHorizontal(20),
                }}>
                    {/*图片区域：*/}
                    <View style={{
                        height: chjStyle.getActualSizeInHorizontal(160),
                        width: chjStyle.getActualSizeInHorizontal(240),
                    }}>
                        <Image style={{
                            height: chjStyle.getActualSizeInHorizontal(160),
                            width: chjStyle.getActualSizeInHorizontal(240),
                        }} source={{uri: picUrl}} resizeMode='stretch'/>

                        {this.renderPrivilege(rowData.reducePrice)}

                        {/*是否显示售出情况*/}
                        {
                            this.renderSoldout(rowData.status === 3,
                                chjStyle.getActualSizeInHorizontal(240),
                                chjStyle.getActualSizeInHorizontal(160))
                        }
                    </View>

                    <View style={{
                        flex: 1,
                        marginLeft: chjStyle.getActualSizeInHorizontal(20),
                        height: chjStyle.getActualSizeInHorizontal(160),
                    }}>
                        {/*车辆简述*/}
                        <Text
                            numberOfLines={2}
                            style={[CustomStyle.baseText, {
                                color: '#4A3D18',
                                fontSize: CustomStyle.getActualFontSize(28),
                                height: CustomStyle.getActualSizeInVertical(64),
                                textAlignVertical: 'top',
                            }]}>{rowData.title}</Text>

                        <View style={{flex: 1, justifyContent: 'center',}}>
                            {/*行驶状况简述*/}
                            <Text
                                style={[CustomStyle.baseText, {
                                    color: '#857e6e',
                                    fontSize: CustomStyle.getActualFontSize(24),
                                }]}>{
                                statusStr
                            }</Text>
                        </View>

                        <View style={{
                            flexDirection: 'row',
                            justifyContent: 'space-between',
                            alignItems: 'center',
                            height: CustomStyle.getActualSizeInVertical(40),
                        }}>
                            {/*价格*/}
                            <View style={{
                                flexDirection: 'row',
                            }}>
                                <Text style={[CustomStyle.baseText, {
                                    color: '#f31',
                                    fontSize: CustomStyle.getActualFontSize(40),
                                    textAlignVertical: 'bottom',
                                }]}>{rowData.price}
                                    <Text style={[{
                                        fontSize: CustomStyle.getActualFontSize(24),
                                    }]}>万</Text>
                                </Text>
                            </View>


                            <View style={{
                                flexDirection: 'row',
                                alignItems: 'flex-end',
                            }}>
                                {this._renderAccredic(rowData)}
                            </View>
                        </View>
                    </View>
                </View>
            </TouchableOpacity>
        );
    }

    /*认证情况 0.未认证 1.已认证 2.质保*/
    _renderAccredic(rowData) {
        let accredit = rowData.isaccred;
        if (accredit === 1) {
            return <View style={{
                flexDirection: 'row-reverse',
            }}>
                <View style={{
                    borderRadius: CustomStyle.getActualSizeInHorizontal(4),
                    backgroundColor: "#ffc000",
                    alignItems: 'center',
                    justifyContent: 'center',
                    paddingLeft: CustomStyle.getActualSizeInHorizontal(16),
                    paddingRight: CustomStyle.getActualSizeInHorizontal(16),
                    paddingTop: CustomStyle.getActualSizeInVertical(4),
                    paddingBottom: CustomStyle.getActualSizeInVertical(4),
                }}>
                    <Text
                        style={[CustomStyle.baseText, {
                            fontSize: CustomStyle.getActualFontSize(20),
                            color: 'white',
                        }]}>CIAS "行"认证</Text>
                </View>
                <Image source={require('../../../img/buyCar/score_background.png')}
                       resizeMode={'contain'}
                       style={{
                           width: CustomStyle.getActualSizeInHorizontal(40),
                           height: CustomStyle.getActualSizeInVertical(40),
                           marginRight: CustomStyle.getActualSizeInHorizontal(-12),
                       }}>
                    <Text style={[CustomStyle.baseText, {
                        color: '#fff',
                        textAlign: 'center',
                        fontWeight: 'bold',
                        fontSize: CustomStyle.getActualFontSize(20),
                        marginTop: chjStyle.getActualSizeInVertical(8),
                    }]}>{Math.floor(rowData.score)}</Text>
                </Image>

            </View>
        } else if (accredit === 2) {
            return <View style={{
                borderRadius: CustomStyle.getActualSizeInHorizontal(4),
                backgroundColor: "#ff6c00",
                alignItems: 'center',
                justifyContent: 'center',
                paddingLeft: CustomStyle.getActualSizeInHorizontal(16),
                paddingRight: CustomStyle.getActualSizeInHorizontal(16),
                paddingTop: CustomStyle.getActualSizeInVertical(4),
                paddingBottom: CustomStyle.getActualSizeInVertical(4),
            }}>
                <Text
                    style={[CustomStyle.baseText, {
                        fontSize: CustomStyle.getActualFontSize(20),
                        color: 'white',
                    }]}>CIAS行悦质保</Text>
            </View>
        }
    }


    //渲染是否售出
    renderSoldout(soldOut, width, height) {
        if (soldOut) {
            return (<View
                style={{
                    backgroundColor: 'rgba(0,0,0,0.5)',
                    position: 'absolute',
                    left: 0,
                    top: 0,
                    width: width,
                    height: height,
                    justifyContent: 'center',
                    alignItems: 'center',
                }}>
                <Image
                    resizeMode='stretch'
                    source={require('../../../img/sold.png')}
                    style={{
                        width: chjStyle.getActualSizeInHorizontal(152),
                        height: chjStyle.getActualSizeInVertical(121)
                    }}>
                </Image>
            </View>);
        }
    }

    /*显示优惠信息*/
    renderPrivilege(data) {
        if (data) {
            return <View style={{
                position: 'absolute',
                left: chjStyle.getActualSizeInHorizontal(10),
                top: 0,
                alignItems: 'center',
            }}>
                <Image
                    style={{
                        width: chjStyle.getActualSizeInHorizontal(60),
                        height: chjStyle.getActualSizeInVertical(100),
                        alignItems: 'center',
                    }}
                    source={require('../../../img/privilege.png')} resizeMode='stretch'>
                    <Text
                        style={[CustomStyle.baseText, {
                            fontSize: CustomStyle.getActualFontSize(24),
                            color: '#ffffff',
                        }]}>已降</Text>
                    <Text
                        style={[CustomStyle.baseText, {
                            fontSize: CustomStyle.getActualFontSize(20),
                            color: '#ffffff',
                            textAlign: 'center',
                        }]}>{data}</Text>
                </Image>
            </View>;
        }
    }


    onPressedItem(rowData) {
        Actions.CarDetail({
            title: 'CarDetail',
            data: rowData,
            showRenzheng: rowData.isaccred === '1',
        });
    }
}
